<template>
  <div>
    <Row>
      <Col span="24">
        <Card class="card clear-float">
          <p class="card-title" slot="title">{{$t('WeqKBDycZ2_VuqAmi538e')}}</p>
          <station-form-info :data="data"></station-form-info>
        </Card>
      </Col>
      <!-- <Col span="8">
        <div class="center">
          <Button type="primary" icon="ios-settings" @click="electicSetting">{{$t('5FpWwnANVjbPWnuaSegqq')}}</Button>
        </div>
      </Col> -->
      <Col span="24">
        <div id="station-map" class="allmap map-area"></div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { getStationInfo } from '@/api/data2'
import StationFormInfo from './components/station_form_info'

export default {
  name: 'station_manage',
  components: {
    StationFormInfo
  },
  data () {
    return {
      data: {
        name: '',
        address: '',
        consdate: '',
        tel: '',
        manager: '',
        scale: 0,
        remark: '',
        pictures: '',
        // 经度
        lng: 0,
        // 维度
        lat: 0,
        profitsharing: 1,
        timezone: 0,
        country: ''
      },
      lat: 0,
      lng: 0
    }
  },
  created () {

  },
  async mounted () {
    await this.queryInfo()
    this.renderMap()
  },
  watch: {
    lat (v) {
      this.data.lat = v
    },
    lng (v) {
      this.data.lng = v
    }
  },
  methods: {
    transform (data) {
      return Object.assign({
        name: '',
        address: '',
        consdate: '',
        tel: '',
        manager: '',
        scale: 0,
        remark: '',
        pictures: '',
        // 经度
        lng: 0,
        // 维度
        lat: 0,
        profitsharing: 1,
        timezone: 0,
        country: ''
      }, data, {
        scale: data.scale + '',
        profitsharing: data.profitsharing + '',
        timezone: data.timezone + ''
      })
    },
    async queryInfo () {
      const { code, data, desc } = await getStationInfo({
        stationid: this.$store.state.user.stationId
      })
      if (code == 200) {
        this.data = this.transform(data || {})
      } else {
        this.$Message.error(desc)
      }
    },
    renderMap () {
      const { lng, lat } = this.data
      const that = this
      // 百度地图API功能
      const map = new BMap.Map('station-map') // 创建Map实例
      map.centerAndZoom(new BMap.Point(lng, lat), 12) // 初始化地图,设置中心点坐标和地图级别
      // 添加地图类型控件
      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        })
      )
      // map.setCurrentCity('襄阳') // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      const geoc = new BMap.Geocoder()
      map.addEventListener('click', function (e) {
        console.log('============click map==========', e)
        map.clearOverlays()
        that.lat = e.point.lat
        that.lng = e.point.lng
        map.addOverlay(new BMap.Marker(e.point))
        // geoc.getLocation(pt, function(rs){
        //   const addComp = rs.addressComponents
        //   alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber)
        // })
      })
      this.map = map
    },
    electicSetting () {
      this.$router.push({ name: 'station_price_info' })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .map-area
    height 500px
    margin 30px 20px 20px 10px
  .center
    text-align center
</style>
